<template>
  <div class="new-case-container">
    <div class="steps-container">
      <a-steps :current="currentStep" class="custom-steps">
        <a-step title="基本信息" />
        <a-step title="病情" />
        <a-step title="牙齿" />
        <a-step title="其他" />
        <a-step title="完成" />
      </a-steps>
    </div>

    <div class="form-container">
      <!-- Step 1: 基本信息 -->
      <div v-if="currentStep === 0" class="step-content">
        <h3 class="step-title">患者基本信息</h3>
        
        <a-form :model="formData" layout="vertical">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="姓名" name="name">
                <a-input v-model:value="formData.name" placeholder="请输入患者姓名" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="性别" name="gender">
                <a-radio-group v-model:value="formData.gender">
                  <a-radio value="男">男</a-radio>
                  <a-radio value="女">女</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="联系电话" name="phone">
                <a-input v-model:value="formData.phone" placeholder="请输入联系电话" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="出生日期" name="birthdate">
                <a-date-picker 
                  v-model:value="formData.birthdate" 
                  style="width: 100%" 
                  placeholder="请选择出生日期"
                />
              </a-form-item>
            </a-col>
          </a-row>
          
          <a-form-item label="过敏史" name="allergies">
            <a-textarea 
              v-model:value="formData.allergies" 
              placeholder="请输入过敏史" 
              :rows="3" 
            />
          </a-form-item>
          
          <a-form-item label="既往病史" name="medicalHistory">
            <a-textarea 
              v-model:value="formData.medicalHistory" 
              placeholder="请输入既往病史" 
              :rows="3" 
            />
          </a-form-item>
        </a-form>
      </div>

      <!-- Step 2: 病情 -->
      <div v-if="currentStep === 1" class="step-content">
        <h3 class="step-title">病情</h3>
        
        <a-form :model="formData" layout="vertical">
          <a-form-item label="主诉" name="chiefComplaint">
            <a-textarea 
              v-model:value="formData.chiefComplaint" 
              placeholder="请输入主诉" 
              :rows="3" 
            />
          </a-form-item>
          
          <a-form-item label="现病史" name="presentIllness">
            <a-textarea 
              v-model:value="formData.presentIllness" 
              placeholder="请输入现病史" 
              :rows="3" 
            />
          </a-form-item>
          
          <a-form-item label="初步诊断" name="initialDiagnosis">
            <a-textarea 
              v-model:value="formData.initialDiagnosis" 
              placeholder="请输入初步诊断" 
              :rows="3" 
            />
          </a-form-item>
          
          <a-form-item label="附加检查" name="additionalExams">
            <div class="upload-container">
              <a-upload
                v-model:fileList="fileList"
                list-type="picture-card"
                :before-upload="beforeUpload"
              >
                <div v-if="fileList.length < 8">
                  <plus-outlined />
                  <div style="margin-top: 8px">上传图片</div>
                </div>
              </a-upload>
            </div>
          </a-form-item>
        </a-form>
      </div>

      <!-- Step 3: 牙齿 -->
      <div v-if="currentStep === 2" class="step-content">
        <h3 class="step-title">牙齿</h3>
        
        <div class="teeth-selection">
          <div class="teeth-row">
            <div 
              v-for="i in 8" 
              :key="`upper-right-${i}`" 
              class="tooth-item"
              :class="{ selected: selectedTeeth.includes(`1-${i}`) }"
              @click="toggleTooth(`1-${i}`)"
            >
              {{ i }}
            </div>
            <div 
              v-for="i in 8" 
              :key="`upper-left-${i}`" 
              class="tooth-item"
              :class="{ selected: selectedTeeth.includes(`2-${i}`) }"
              @click="toggleTooth(`2-${i}`)"
            >
              {{ i }}
            </div>
          </div>
          <div class="teeth-row">
            <div 
              v-for="i in 8" 
              :key="`lower-right-${i}`" 
              class="tooth-item"
              :class="{ selected: selectedTeeth.includes(`3-${i}`) }"
              @click="toggleTooth(`3-${i}`)"
            >
              {{ i }}
            </div>
            <div 
              v-for="i in 8" 
              :key="`lower-left-${i}`" 
              class="tooth-item"
              :class="{ selected: selectedTeeth.includes(`4-${i}`) }"
              @click="toggleTooth(`4-${i}`)"
            >
              {{ i }}
            </div>
          </div>
        </div>
        
        <a-form :model="formData" layout="vertical">
          <a-form-item label="牙齿情况描述" name="teethDescription">
            <a-textarea 
              v-model:value="formData.teethDescription" 
              placeholder="请描述牙齿情况" 
              :rows="4" 
            />
          </a-form-item>
        </a-form>
      </div>

      <!-- Step 4: 其他 -->
      <div v-if="currentStep === 3" class="step-content">
        <h3 class="step-title">其他</h3>
        
        <a-form :model="formData" layout="vertical">
          <a-form-item label="收款人" name="receiver">
            <a-input v-model:value="formData.receiver" placeholder="请输入收款人" />
          </a-form-item>
          
          <a-form-item label="联系电话" name="receiverPhone">
            <a-input v-model:value="formData.receiverPhone" placeholder="请输入联系电话" />
          </a-form-item>
          
          <a-form-item label="收款地址" name="receiverAddress">
            <a-input v-model:value="formData.receiverAddress" placeholder="请输入收款地址" />
          </a-form-item>
          
          <a-form-item label="治疗地址" name="treatmentAddress">
            <a-input v-model:value="formData.treatmentAddress" placeholder="请输入治疗地址" />
          </a-form-item>
          
          <a-form-item label="病历备注" name="caseNotes">
            <a-textarea 
              v-model:value="formData.caseNotes" 
              placeholder="请输入病历备注" 
              :rows="4" 
            />
          </a-form-item>
          
          <a-form-item label="医生备注" name="doctorNotes">
            <a-textarea 
              v-model:value="formData.doctorNotes" 
              placeholder="请输入医生备注" 
              :rows="4" 
            />
          </a-form-item>
        </a-form>
      </div>

      <!-- Step 5: 完成 -->
      <div v-if="currentStep === 4" class="step-content completion">
        <div class="completion-icon">
          <check-circle-outlined />
        </div>
        <h3 class="completion-title">病例创建成功</h3>
        <p class="completion-desc">您已成功创建患者病例，可以开始治疗流程</p>
        <div class="completion-actions">
          <a-button type="primary" @click="viewCase">查看病例</a-button>
          <a-button @click="createAnother">创建新病例</a-button>
        </div>
      </div>
    </div>

    <div class="form-actions">
      <div class="left-actions">
        <a-button 
          v-if="currentStep > 0 && currentStep < 4" 
          @click="prevStep"
        >
          上一步
        </a-button>
      </div>
      <div class="right-actions">
        <a-button 
          v-if="currentStep < 4" 
          type="primary" 
          @click="nextStep"
        >
          {{ currentStep === 3 ? '提交' : '下一步' }}
        </a-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { 
  PlusOutlined,
  CheckCircleOutlined
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

const currentStep = ref(0)
const fileList = ref([])
const selectedTeeth = ref([])

const formData = reactive({
  // 基本信息
  name: '',
  gender: '男',
  phone: '',
  birthdate: null,
  allergies: '',
  medicalHistory: '',
  
  // 病情
  chiefComplaint: '',
  presentIllness: '',
  initialDiagnosis: '',
  
  // 牙齿
  teethDescription: '',
  
  // 其他
  receiver: '',
  receiverPhone: '',
  receiverAddress: '',
  treatmentAddress: '',
  caseNotes: '',
  doctorNotes: ''
})

const nextStep = () => {
  if (currentStep.value === 3) {
    // 提交表单
    submitForm()
  } else {
    currentStep.value++
  }
}

const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--
  }
}

const toggleTooth = (toothId) => {
  const index = selectedTeeth.value.indexOf(toothId)
  if (index === -1) {
    selectedTeeth.value.push(toothId)
  } else {
    selectedTeeth.value.splice(index, 1)
  }
}

const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
  if (!isJpgOrPng) {
    message.error('只能上传JPG或PNG格式的图片!')
  }
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    message.error('图片大小不能超过2MB!')
  }
  return false
}

const submitForm = () => {
  // 这里可以添加表单验证逻辑
  console.log('提交表单数据:', formData)
  console.log('选中的牙齿:', selectedTeeth.value)
  console.log('上传的文件:', fileList.value)
  
  // 模拟提交成功
  setTimeout(() => {
    currentStep.value = 4
  }, 1000)
}

const viewCase = () => {
  // 查看病例详情
  message.info('查看病例详情')
}

const createAnother = () => {
  // 重置表单
  Object.keys(formData).forEach(key => {
    if (key === 'gender') {
      formData[key] = '男'
    } else if (key === 'birthdate') {
      formData[key] = null
    } else {
      formData[key] = ''
    }
  })
  
  selectedTeeth.value = []
  fileList.value = []
  currentStep.value = 0
}

defineExpose({
  resetForm: createAnother
})
</script>

<style scoped>
.new-case-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 24px;
}

.steps-container {
  margin-bottom: 32px;
}

.custom-steps :deep(.ant-steps-item-title) {
  font-size: 16px;
}

.step-content {
  padding: 0 24px;
  margin-bottom: 24px;
}

.step-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #262626;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

.teeth-selection {
  margin-bottom: 24px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 16px;
  background-color: #fafafa;
}

.teeth-row {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.teeth-row:last-child {
  margin-bottom: 0;
}

.tooth-item {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  margin: 0 4px;
  cursor: pointer;
  background-color: #fff;
  transition: all 0.3s;
}

.tooth-item:hover {
  border-color: #1890ff;
}

.tooth-item.selected {
  background-color: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

.completion {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 0;
}

.completion-icon {
  font-size: 72px;
  color: #52c41a;
  margin-bottom: 24px;
}

.completion-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #262626;
}

.completion-desc {
  font-size: 16px;
  color: #8c8c8c;
  margin-bottom: 32px;
}

.completion-actions {
  display: flex;
  gap: 16px;
}

.upload-container {
  display: flex;
  flex-wrap: wrap;
}
</style>
